<template>
  <div style="margin: 20px">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="eCharts图表" name="first">
        <div id="barChart" style="width: 400px;height: 300px;border: solid 1px cornflowerblue">Chart</div>
        <el-button type="primary" @click="updateBar">更新</el-button>
      </el-tab-pane>
      <el-tab-pane label="事务测试" name="second">
        <el-button type="primary" @click="plusOne">+1</el-button>&nbsp;&nbsp;
        <el-input v-model="dsNumber" style="width: 60px" />
      </el-tab-pane>
      <el-tab-pane label="其他2" name="third">
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              v-if="vIfVisible"
              type="success"
              plain
              icon="el-icon-check"
              size="mini"
              @click="publish"
            >v-if</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              v-show="vShowVisible"
              type="success"
              plain
              icon="el-icon-check"
              size="mini"
              @click="publish"
            >v-show</el-button>
          </el-col>
        </el-row>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-check"
              size="mini"
              @click="setVIf"
            >v-if显隐</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="success"
              plain
              icon="el-icon-check"
              size="mini"
              @click="setVShow"
            >v-show显隐</el-button>
          </el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="其他3" name="fourth">
        <el-input v-model="companyAddr" style="width: 200px" />
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          @click="checkAddr"
        >测试正则</el-button>
      </el-tab-pane>
      <el-tab-pane label="视频播放" name="fifth">
        <!--在视频外面加一个容器-->
        <div class="input_video">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions"
          ></video-player>
        </div>
      </el-tab-pane>
      <el-tab-pane label="websocket" name="6th">
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          @click="websocketSend"
        >发送</el-button>
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          @click="websocketClose"
        >关闭连接</el-button>
      </el-tab-pane>
      <el-tab-pane label="手写签名" name="7th">
<!--        <el-button @click="handleSignName">点击开始签名</el-button>-->
        <SignNameModal ref="signNameModal"/>
      </el-tab-pane>
      <el-tab-pane label="跳转地图" name="8th">
        <el-button @click="handleMap('百度地图')">百度地图</el-button>
        <el-button @click="handleMap('高德地图')">高德地图</el-button>
        <el-button @click="handleMap('腾讯地图')">腾讯地图</el-button>
      </el-tab-pane>
      <el-tab-pane label="img标签预览图片" name="9th">
        <img class="contentImg" :src="imageUrl" alt="测试的图片"/>
      </el-tab-pane>
      <el-tab-pane label="mock测试" name="10th">
        <el-button
          type="success"
          plain
          icon="el-icon-check"
          size="mini"
          @click="testMock"
        >点击发送请求</el-button>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// 导入Echarts
import echarts from 'echarts'
import StockPileApi from '../../api/StockPileApi'
import SignNameModal from '@/views/liuyucheng/components/SignNameModal.vue'
import axios from 'axios'

export default {
  name: 'ECharts',
  components: { SignNameModal },
  data() {
    return {
      activeName: 'first',
      barChart: null,
      barChartOption: {
        title: { text: '每日销量柱状图' },
        tooltip: {},
        xAxis: {
          data: []
        },
        yAxis: {},
        series: [{
          name: '销量',
          type: 'bar',
          data: []
        }]
      },
      dsNumber: 0,
      vIfVisible: true,
      vShowVisible: true,
      companyAddr: '',
      //视频播放器参数
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0, 3.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: "",
            // src: "https://stream7.iqilu.com/10339/upload_transcode/202002/18/20200218114723HDu3hhxqIT.mp4", //url地址
            src: "http://192.168.56.10/demo.mp4", //静态资源视频文件
          },
        ],
        poster: "", //你的封面地址
        // width: document.documentElement.clientWidth,
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      websocket: null,
      imageUrl: 'http://localhost:9000/SpringbootDemo/echarts/getImage'
    }
  },
  created() {

  },
  mounted() {
    this.initChart()
    this.setDataBar()
    this.readDs()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    initChart() {
      this.barChart = echarts.init(document.getElementById('barChart'))
      // 绘制图表
      this.barChart.setOption(this.barChartOption)
    },
    setDataBar() {
      const param = { id: 1 }
      // const id = 1
      StockPileApi.getDataBar(param).then(res => {
        if (res.code === 200) {
          this.barChartOption.xAxis.data = res.data.key
          this.barChartOption.series[0].data = res.data.value
          this.initChart()
        }
      })
    },
    updateBar() {
      this.setDataBar()
    },
    readDs() {
      StockPileApi.readDs().then(res => {
        if (res.code === 200) {
          this.dsNumber = res.data
        }
      })
    },
    plusOne() {
      StockPileApi.plusOne().then(res => {
        // if (res.code === 200) {
        // }
        this.$vMessage({
          message: res.data,
          type: 'info'
        })
        this.readDs()
      })
    },
    /**
     * 测试
     */
    publish(){
      this.$msgbox.alert('')
    },
    /**
     * 测试
     */
    setVIf(){
      this.vIfVisible = !this.vIfVisible
    },
    /**
     * 测试
     */
    setVShow(){
      this.vShowVisible = !this.vShowVisible
    },
    /**
     * 测试正则
     */
    checkAddr(){
      let reg = /^[a-zA-Z0-9\u4e00-\u9fa5]+$/
      // let reg = /^[a-zA-Z0-9\u4e00-\u9fa5 -－_＃#（）()]+$/
      var res = reg.test(this.companyAddr);
      alert(res)
    },
    //http://192.168.56.1:9000/SpringbootDemo/
    websocketSend(){
      let websocket = new WebSocket("ws://localhost:9000/SpringbootDemo/chat")
      websocket.onopen = function(event) {
        console.log("建立连接");
        websocket.send('Hello WebSockets!');
      }
      websocket.onclose = function(event) {
        console.log('连接关闭')
      }
      websocket.onmessage = function(event) {
        console.log("接收到后端的消息",event.data)
      }
    },
    websocketClose(){

    },
    /**
     * 开始调用手写签名组件
     */
    handleSignName(){

    },
    /**
     * 根据地图类型、位置获取不同的地图页面跳转链接
     * @param {*} mapType 地图类型
     * @param {*} location 经纬度 lat:纬度 lng:经度
     * @param {*} address 详细地址
     */
    getMapApp(mapType, location, address) {
      // 地图官方api文档
      // 腾讯地图： https://lbs.qq.com/webApi/uriV1/uriGuide/uriWebMarker
      // 高德地图： https://developer.amap.com/api/uri-api/guide/mobile-web/point
      // 百度地图： http://lbsyun.baidu.com/index.php?title=uri/api/web
      const { lat, lng } = location
      let url = ''
      switch (mapType) {
        case '腾讯地图':
          // url = 'https://apis.map.qq.com/uri/v1/marker?marker=coord:' + lat + ',' + lng + ';addr:' + address + ';title:'+address+'&referer=keyfree';
          url = '  https://apis.map.qq.com/uri/v1/marker?marker=coord:39.892326,116.342763;title:超好吃冰激凌;addr:手帕口桥北铁路道口&referer=' + '微信公众号'
          break
        case '高德地图':
          // url = 'https://uri.amap.com/marker?position=' + lng + ',' + lat + '&name=' + address + '&callnative=1';
          url = 'https://uri.amap.com/marker?position=121.287689,31.234527&name=' + '上海市' + '&src=' + '微信公众号' + '&coordinate=gaode&callnative=1'
          break
        case '百度地图':
          // url = 'https://api.map.baidu.com/marker?location=' + lat + ',' + lng + '&title='+address+'&content=' + address + '&output=html&src=webapp.reformer.appname&coord_type=gcj02';
          url = 'http://api.map.baidu.com/marker?location=40.047669,116.313082&title=百度奎科大厦&content=百度奎科大厦&output=html&src=webapp.baidu.openAPIdemo'
          break
        default:
          break
      }
      return url
    },
    /**
     * 在地图进行标点定位
     * @param type 地图类型
     */
    handleMap(type) {
      //115.886216,28.638301
      let url = this.getMapApp(type, { lat: '115.886216', lng: '28.638301' }, '南昌动物园')
      console.log(url)
      window.open(url)
    },
    testMock(){
      axios.get('/user/userinfo').then(res=>{
        console.log(res.data.name)
      }).catch(err=>{
        console.error(err)
      })
    }
  }
}
</script>
<style scoped>
.input_video {
  width: 960px;
  height: 960px;
  margin: 0 auto;
}
.contentImg{
  width: 100%;
}
</style>
